<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>{{ data.host }}:{{ data.port }}</title>

  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="shortcut icon" href="https://blz.nosdn.127.net/sre/posts/images/favicon.ico"/>
  <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/plugins/toastr/toastr.min.css">

  <link href="/static/plugins/xterm/xterm.css" rel="stylesheet" type="text/css"/>

  <link rel="Shortcut Icon" href="/static/img/favicon.ico">
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  <!-- Google Font -->
  <link rel="stylesheet" href="/static/css/local.google.fonts.css">
</head>

<body>
<div id="terminal"></div>
</body>

<script src="/static/js/jquery.min.js"></script>
<script src="/static/plugins/toastr/toastr.min.js"></script>
<script src="/static/plugins/xterm/xterm.js"></script>
<script src="/static/plugins/xterm/addons/fit/fit.js"></script>
<script>
    function terminal_size() {
        return {
            cols: Math.floor($('#terminal').width() / 9),
            rows: Math.floor($(window).height() / 17),
        }
    }

    let cols = terminal_size().cols;
    let rows = terminal_size().rows;

    // xterm init
    var term = new Terminal({cursorBlink: true, useStyle: true, cols: cols, rows: rows});
    term.open(document.getElementById('terminal'));

    // websocket conn
    var socket = new WebSocket('ws://' + window.location.host + '/host/{{ data.id }}/' +
        `?cols=${cols}&rows=${rows}`);

    socket.onopen = function () {
        term.on('data', function (data) {
            send_data = JSON.stringify({
                'flag': 'input',
                'data': data,
            });

            socket.send(send_data)
        });

        socket.onerror = function (event) {
            console.log('error:' + event);
        };

        socket.onmessage = function (event) {
            data = JSON.parse(event.data);
            term.write(data.message);

            if (data.flag === 'failed') {
              socket.close();
            }
        };

        socket.onclose = function (event) {
            term.write('\n\r\x1B[1;3;31msocket is already closed.\x1B[0m');
            // term.destroy();
        };
    };

    // terminal resize
    $(window).resize(function () {
        let cols = terminal_size().cols;
        let rows = terminal_size().rows;

        send_data = JSON.stringify({
            'flag': 'resize',
            'cols': cols,
            'rows': rows
        });

        socket.send(send_data);
        term.resize(cols, rows)
    })
</script>
</html>